<template>
  <view class="wrap">
    <view class="search">
      <u-search v-model="query.username" @custom="search" @search="search" placeholder="用户名"></u-search>
    </view>
    <scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
      <u-cell-group class="list" :border="false">
        <u-swipe-action :options="options" v-for="(item, index) in list" :key="item.userId" :index="index"
                        @click="optionsClick">
          <u-cell-item :arrow="true" >
            <text slot="title">用户:{{ item.username }} </text>
            <text slot="label">客户端:{{ item.clientId }} | 令牌：{{ item.accessToken }}</text>
          </u-cell-item>
        </u-swipe-action>
      </u-cell-group>
      <view class="loadmore" @click="loadMore">
        <u-loadmore :status="loadStatus"></u-loadmore>
      </view>
    </scroll-view>
  </view>
</template>
<script>

export default {
  data() {
    return {
      query: {
        current: 1,
        size: 20,
        username: ''
      },
      list: [],
      count: 0,
      loadStatus: 'loadmore',
      options: [
        {text: '删除', style: {background: '#dd524d'}}
      ]
    };
  },
  onLoad() {
    this.loadList();
  },
  onShow() {
    if (uni.getStorageSync('refreshList') === true) {
      uni.removeStorageSync('refreshList');
      this.search('');
    }
  },
  methods: {
    loadMore() {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.query.current += 1;
        this.loadList();
      }, 100);
    },
    loadList() {
      this.$u.api.unixToken.page(this.query).then(res => {
        if (!res.data.records || res.data.records.length == 0) {
          this.loadStatus = "nomore";
          return;
        }
        this.list = this.list.concat(res.data.records);
        this.total = res.data.total;
        this.query.current = res.data.current;
        this.query.size = res.data.size;
        this.loadStatus = "loadmore";
      });
    },
    optionsClick(rowIndex, btnIndex) {
      if (btnIndex == 0) {
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确认要删除该数据吗？',
          showCancel: true,
          success: function (res2) {
            if (res2.confirm) {
              let row = self.list[rowIndex];
              self.$u.api.unixToken.delete({token: row.access_token}).then(res => {
                self.$u.toast('删除成功');
                self.query.current = 1
                self.list = []
                self.loadList()
              });
            }
          }
        });
      }
    },
    search(value) {
      this.list = [];
      this.query.current = 1;
      this.query.username = value;
      this.loadList();
    }
  }
};
</script>
